<template>
  <el-date-picker v-model="dateRange" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期"
    :picker-options="pickerOptions" @change="handleChange" unlink-panels style="width: 350px" />
  <el-select v-model="caseSel" style="width: 500px;">
    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
  </el-select>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
const dateRange = ref([])
const options = ref([
  {
    label: "5",
    value: 5
  },
  {
    label: "7",
    value: 7
  },
  {
    label: "9",
    value: 9
  }
])
const caseSel = ref("")

// 处理时间变化
function handleChange(val) {
  if (!val || val.length !== 2 || !val[0] || !val[1]) {
    return
  }
  const [start, end] = val
  const diffTime = end.getTime() - start.getTime()
  const diffDays = diffTime / (1000 * 60 * 60 * 24)

  if (diffDays > 7 && caseSel.value == 5) {
    ElMessage.error('结束时间必须比开始时间小7天以上！')
    // 重置为初始值
    dateRange.value = []
  }
}

// 可选：限制结束时间不能早于开始时间
const pickerOptions = {
  disabledDate(time) {
    // 这里不做限制，交给校验逻辑处理
    return false
  }
}
</script>
